Usage Patterns For Client-Side URL parameters

2.1 Addressing Into Multimedia Streams

When publishing multimedia streams, there is often a need to address into specific points in the multimedia stream, e.g., by using a time-index. The simplest means of doing this is to pass in the start-time as a server-side parameter in the URL, e.g., http://www.example.com/media.stream?start=03:06:09 and have the server start streaming the content starting at 3 hours, 6 minutes and 9 seconds into the content. This has the additional side-benefit of creating distinct URLs for each point in the media stream and such URLs can be used to bookmark locations of interest.

It is also possible to leverage client-side parameters encoded as part of the URL (using a # ), where this pseudo fragment identifier is used by client-side scripts as an argument to be passed to an appropriate locator function. Consider the following example taken from cnn.com :

<a href="http://www.cnn.com/video/#/video/tech/2008/02/19/vo.aus.sea.spider.ap">
          Giant sea spider filmed deep underwater
          </a>

CNN uses links like the above for all the topical video segments that are published on its site. The URL in this case has the following components:

2.2 Interaction State And Browser History

AKA make the back button do the right thing . For live examples of this design pattern, see GMail and Google Maps both of which take extreme care to ensure that the back button works as the user would expect. These applications use iframe proxies to achieve the desired effect.

2.3 AJAX Libraries And State Management

AJAX applications use features of Dynamic HTML (DHTML) to create highly reactive user experiences. Updates to the Web user interface in response to user actions no longer require a full page reload. Consequently, the user can perform a sequence of interaction steps while remaining on the same page at least as seen from the browser's perspective of content.location . This makes for a good user experience, except for the following:

Recording key points in the interaction flow, e.g., for bookmarking.
Providing intuitive behavior for the browser's history mechanism.
Snapshoting interaction state so that one can return to a partially completed task at a later time.

Today, many of the details of AJAX programming have been abstracted away by higher level toolkits such as Dojo [dojo] and [google-gwt]GWT. Management of interaction state and browser history is one of the key affordances implemented in these libraries. History mechanisms in AJAX libraries like GWT and Dojo share a lot in common, and the approach can be traced back to Really Simple History (RSH) . In addition, the mechanism described here has also been adopted by a recent update to GMail.

The basic premise is to keep track of the application's internal state in the url fragment identifier. This works because updating the fragment doesn't typically cause the page to be reloaded. This approach has several benefits:

It's about the only way to control the browser's history reliably.
It provides good feedback to the user.
It's bookmarkable — i.e., the user can create a bookmark to the current state and save it, email it, or whatever.

2.4 Web Command Lines

When applications can be built of Web parts, there is a need to configure them at the point the application is launched. Traditional applications would call these default start-up or command-line options. We see the equivalent emerging for configuring desktop gadgets and widgets where command-line options are passed in via URL parameters — in this context, the URL is the Web command-line. For one sample implementation and its associated usage, see Using URLs To Pass Parameters To The Web . Dave Raggett's HTMLSlidy uses URLs of the form ...#(nn) to address into a deck of slides.

2.5 Passing Data Among Frames

Web applications that use multiple frames often need to pass data between them. This problem gets even more interesting when the child frame displays content from a domain different from that of its parent. In this case, the parent and child frames do not share any script context — that would open a cross-site scripting hole. A common technique that is used where the parent and child have mutually agreed to collaborate is for the parent to pass data to the child via a fragment identifier by reseting the child's location URL. Thus, given a parent frame P and a child frame C , where the location URLs U_P and U_C come from different domains, the parent frame might pass data to the child by resetting its location URL to U_C#data ; the child picks up this data by polling for changes in its location URL. This technique is common in Comet Programming . As an example, the Dojo AJAX toolkit uses an IFrame proxy to enable cross-domain XML HTTP Requests. this is a useful technique when writing cross-site mashups. As an example, see XKCD and AxsJAX — a cross-site mashup that mashes together XKCD comics with their associated transcripts to create a speech-friendly XKCD experience.

2.6 The Naked Hash-Ref

As the final item in the usage scenarios as seen on the Web , this section documents the use of a single # sign as the value of the href attribute on HTML anchors. This can be thought of as a relative URL with a null fragment identifier. Web sites wishing to override the default-target behavior of anchors use this when attaching a JavaScript event-handler to anchor elements for mouse-clicks. The only justification to place a naked # as the value of the href attribute appears to be to avoid anything showing up on the browser status bar as the user activates the link. Note that this idiom also creates significant hurdles for non-mouse users of the Web.

6.1 WhATWG: PushState()

Here is a link to a proposal that is the topic of ongoing discussion in the WHATWG for encoding client-side state.

Editorial note	May 11, 2009
Proposal pushState() allows for changing the whole URL using ECMAScript so that the URL exposed to copy-and-paste can still make sense in contexts without scripting. It also addresses the back button concern — see pushState().